<template>
  <div class="order">
    <!-- 搜索框 -->
    <van-search
      @click="goSearch"
      v-model="value"
      placeholder="输入商品名称关键字"
      input-align="left"
    />

    <!-- 店面位置 -->
    <div class="position">
      <div class="icon">
        <img src="../assets/order/stars.svg" alt="" />
        <div class="text">广州北京路城壹汇GO店</div>
        <img src="../assets/order/Rightarrow.svg" alt="" />

        <!-- 选择自取、外卖 -->
        <div class="choice">
          <div
            class="choicebox"
            :class="nextindex === i ? 'next' : ''"
            v-for="(v, i) in choiceData"
            :key="i"
            @click="changechoice(i)"
          >
            {{ v.tit }}
          </div>
        </div>
      </div>
      <div class="txt">距离您<span>1.1</span>Km</div>
    </div>

    <!-- 产品通知栏 -->
    <div class="board">
      <van-notice-bar left-icon="volume-o" :scrollable="false">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3100"
          :show-indicators="false"
        >
          <van-swipe-item v-for="(v, i) in boardData" :key="i">
            {{ v.text }}
          </van-swipe-item>
        </van-swipe>
      </van-notice-bar>

      <div class="switch" @click="open">
        更多
        <van-icon name="arrow-down" />
      </div>
    </div>

    <div class="boardbox" v-show="showboard">
      <div class="switch" @click="shut">
        收起
        <van-icon name="arrow-up" />
      </div>

      <div class="boardtext" v-for="(v, i) in boardData" :key="i">
        <img src="../assets/order/Lightbulb.svg" alt="" />
        {{ v.text }}
      </div>
    </div>

    <div class="main">
      <!-- 菜单栏 -->
      <div class="leftbox">
        <van-sidebar
          v-model="activeKey"
          @change="changeAsideBar"
          @click="changetitle(index)"
        >
          <van-sidebar-item
            :class="activeKey === index ? 'current' : ''"
            v-for="(item, index) in asideBarData"
            :key="index"
            :title="item.typeDesc"
            badge="新品"
          >
          </van-sidebar-item>
        </van-sidebar>
      </div>

      <!-- 商品栏 -->
      <div class="rightbox">
        <!-- 第一个轮播图 -->
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in oneimages" :key="index">
            <img class="onechart" v-lazy="image" />
          </van-swipe-item>
        </van-swipe>

        <!-- 第二个轮播图 -->
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in twoimages" :key="index">
            <img class="twochart" v-lazy="image" />
          </van-swipe-item>
        </van-swipe>

        <!-- 商品类型 -->
        <!-- 使用v-for时要注意key值的唯一性 -->
        <div class="title">
          <img :src="iconData[activeKey].icon" alt="" />
          {{ iconData[activeKey].title }}
        </div>

        <!-- 商品 -->
        <div class="menu" v-for="(item, index) in productData" :key="index">
          <div class="menubox">
            <!-- 商品图 -->
            <div class="photo">
              <img :src="item.smallImg" alt="" />
            </div>

            <div class="textbox">
              <!-- 商品名 -->
              <div class="name">{{ item.name }}</div>

              <!-- 包含物 -->
              <div class="contain">
                <div class="containbox hot">可选择冷、热</div>
                <div class="containbox bean">含有奶、豆制品</div>
              </div>

              <!-- 商品简介 -->
              <div class="details">
                {{ item.desc }}
              </div>

              <div class="btnbox">
                <!-- 价格 -->
                <div class="price">￥{{ item.price }}</div>

                <!-- 选规格 -->
                <van-button
                  type="primary"
                  text="选规格"
                  @click="viewProductDetail(item.pid)"
                />
                <van-overlay :show="show" @click="show = false">
                  <!-- 商品详情页 -->
                  <div class="wrapper">
                    <div class="block" @click.stop>
                      <!-- 关闭页面 -->
                      <div class="btn" @click="show = false"></div>
                      <!-- 商品详情插槽页面 -->
                      <Product :arr="arr"></Product>
                    </div>
                  </div>
                </van-overlay>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Product from "../components/Product.vue";
export default {
  name: "Order",

  //插槽
  components: {
    Product,
  },

  data() {
    return {
      value: "",
      arr: "",

      showboard: false,

      //轮播图
      oneimages: [
        require("../assets/order/tea.png"),
        require("../assets/order/coffee.png"),
        require("../assets/order/Fruittea.png"),
        require("../assets/order/factory.png"),
        require("../assets/order/Puretea.png"),
      ],

      twoimages: [
        require("../assets/order/0103c9616f7f0b11013e89437392a6.jpg@1280w_1l_2o_100sh.jpg"),
        require("../assets/order/016b2d616f7f0c11013f22cf6c7419.jpg@1280w_1l_2o_100sh.jpg"),
        require("../assets/order/018248616f7f0211013e8943bc5e46.jpg@1280w_1l_2o_100sh.jpg"),
        require("../assets/order/019eca616f7f0211013e8943f35b48.jpg@1280w_1l_2o_100sh.jpg"),
        require("../assets/order/01f8b2616f7f0211013e8943989c64.jpg@1280w_1l_2o_100sh.jpg"),
        require("../assets/order/01fe95616f7f0211013f22cf53715b.jpg@1280w_1l_2o_100sh.jpg"),
      ],

      // 选择
      choiceData: [{ tit: "自取" }, { tit: "外卖" }],
      nextindex: 0,

      // 通知栏
      boardData: [
        {
          text: "超厚实,新料到，芋泥系列新升级，首次加入紫米麻薯。—口吸足5层料。",
        },
        {
          text: "优选阳光玫瑰青提,延续手剥工艺;新鲜香水柠檬,35次暴打出香。爆炸多肉,清甜沁爽。",
        },
        {
          text: "第5年悉心打磨，还是那—杯，芋泥经典配方回归，不做任何修改。",
        },
      ],

      // 商品类型名称\图标
      iconData: [
        {
          title: "推荐",
          icon: require("../assets/order/strawberry.svg"),
        },
        {
          title: "拿铁",
          icon: require("../assets/order/hotspring.svg"),
        },
        {
          title: "咖啡",
          icon: require("../assets/order/Coffeebar.svg"),
        },
        {
          title: "瑞纳冰",
          icon: require("../assets/order/ice.svg"),
        },
        {
          title: "水果茶",
          icon: require("../assets/order/Grape.svg"),
        },
      ],

      show: false,

      //商品类型数据
      asideBarData: [],

      //选中项的索引
      activeKey: 0,

      //商品数据
      productData: [],
    };
  },

  created() {
    //获取商品类型
    this.getTypeData();
  },

  methods: {
    //跳转到搜索页面
    goSearch() {
      this.$router.push({ name: "Search" });
    },

    // 切换自取、外卖
    changechoice(i) {
      if (this.nextindex === i) {
        return;
      }

      this.nextindex = 1;

      setTimeout(() => {
        if (this.nextindex === 1) {
          this.$router.push({ name: "Receiving" });
        }
      }, 100);

      // 
    },

    //打开公告栏、关闭公告栏
    open() {
      this.showboard = true;
    },

    shut() {
      this.showboard = false;
    },

    //切换商品分类
    changeAsideBar(index) {
      // 
      //获取当前选择类型
      let item = this.asideBarData[index];
      this.getProductData(item);
    },

    // 获取商品类型数据
    getTypeData() {
      this.axios({
        method: "get",
        url: "/type",
      })
        .then((res) => {
          // 

          if (res.data.code === 400) {
            //添加一个推荐类
            res.data.result.unshift({ type: "isHot", typeDesc: "推荐" });

            this.asideBarData = res.data.result;

            //根据选择的商品类型获取商品数据
            this.getProductData(this.asideBarData[this.activeKey]);
          }
        })
        .catch((err) => {
          
        });
    },

    //获取商品数据
    getProductData(item) {
      // 

      //请求参数
      let params = {
        key: "",
        value: "",
      };

      if (item.type === "isHot") {
        //推荐
        params.key = "isHot";
        params.value = 1;
      } else {
        params.key = "type";
        params.value = item.type;
      }

      //发起请求
      this.axios({
        method: "get",
        url: "/typeProducts",
        params,
      })
        .then((res) => {
          // 

          if (res.data.code === 500) {
            this.productData = res.data.result;
          }
          // 
        })
        .catch((err) => {
          
        });
    },

    //查看商品详情
    viewProductDetail(pid) {
      this.show = true;
      this.arr = pid;
      // 
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-search {
  height: 40px;
}

// 店面位置
.position {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 14px 0 6px 0;
}

.icon {
  width: 100%;
  display: flex;
  padding: 0 12px;
  align-items: center;
}

.icon img {
  width: 14px;
  height: 14px;
  padding: 8px 6px 8px 0px;
}

.choice {
  width: 120px;
  height: 30px;
  margin-left: auto;
  background-color: #f6f6f6;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  display: flex;
}

.choicebox {
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #999999;
  border-radius: 20px;
  &.next {
    width: 70px;
    color: #fff;
    background-color: #37343b;
  }
}

.text {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #37343b;
  text-align: center;
}

.txt {
  width: 100%;
  font-size: 10px;
  color: #8d8d8d;
  padding: 0 10px;
}

// 产品通知栏
.board {
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
}

.notice-swipe {
  height: 40px;
  line-height: 40px;
}

/deep/.van-notice-bar {
  width: 310px;
  height: 20px;
  padding: 4px 6px;
  background-color: #fff;
}

/deep/.van-swipe-item {
  font-size: 10px;
  color: #8d8d8d;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.boardbox {
  width: 100%;
  height: 170px;
  background-color: #fff;
  position: relative;
  bottom: 24px;
  z-index: 99;
}

.switch {
  width: 60px;
  height: 20px;
  line-height: 20px;
  color: #818181;
  text-align: center;
  margin-left: auto;
}

.boardtext {
  width: 360px;
  color: #818181;
  margin: auto;
  margin-bottom: 10px;
}

.boardtext img {
  width: 20px;
  height: 20px;
}

//内容
.main {
  width: 100%;
  position: fixed;
  display: flex;
  left: 0;
  right: 0;
  top: 136px;
  bottom: 50px;
  background-color: #fff;
}

.leftbox {
  width: 80px;
  height: 100%;
  overflow-y: auto;
  background-color: #f6f6f6;
  // 菜单栏
  /deep/.van-sidebar-item {
    font-size: 10px;
    text-align: center;
    color: #8d8d8d;
    background-color: #f6f6f6;
    padding: 14px;
    &.current {
      background-color: #fff;
      color: #37343b;
    }
  }

  /deep/.van-sidebar-item__text {
    position: initial;
  }

  /deep/.van-sidebar-item--select::before {
    width: 3px;
    height: 100%;
    background-color: #dba871;
  }

  /deep/.van-info {
    width: 36px;
    height: 16px;
    background-color: #e3f5da;
    line-height: 16px;
    transform: scale(0.7);
    font-size: 10px;
    text-align: center;
    color: #79b664;
    border-radius: 0;
  }
}

.rightbox {
  flex: 1;
  height: 100%;
  margin-left: 5px;
  overflow-y: auto;
}

// 商品栏
// 轮播图
.onechart {
  width: 100%;
  height: 100px;
}

.twochart {
  width: 100%;
  height: 126px;
}

/deep/.van-swipe {
  width: 100%;
  border-radius: 8px;
}

/deep/.van-swipe__indicator {
  width: 8px;
  height: 8px;
  background-color: #818181;
}

/deep/.van-swipe__indicator--active {
  background-color: #37343b;
}

// 产品
.menu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.title {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #37343b;
}

.title img {
  width: 20px;
  height: 20px;
}

.menubox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 0 4px 0;
}

.photo {
  width: 30%;
  height: 76px;
}

.photo img {
  width: 90%;
  height: 80px;
}

.textbox {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
}

.name {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #37343b;
  text-align: left;
  &.add {
    font-size: 16px;
    padding: 0 0 4px 0;
  }
}

.contain {
  width: 100%;
  display: flex;
}

.containbox {
  width: 90px;
  font-size: 12px;
  text-align: center;
  padding: 0 4px;
  transform: scale(0.7);
  position: relative;
  right: 10px;
  &.hot {
    color: #e1aa66;
    background-color: #fbf5ed;
  }
  &.bean {
    color: #9a9a9a;
    background-color: #f3f3f3;
    position: relative;
    right: 20px;
  }
}

.details {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 10px;
  text-align: left;
  color: #a3a3a3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.btnbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 6px 0 0;
}

.price {
  width: 70px;
  height: 20px;
  line-height: 20px;
  text-align: left;
  font-size: 14px;
  color: #37343b;
  font-weight: 600;
}

/deep/.van-button--primary {
  width: 50px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  background-color: #dba871;
  text-align: center;
  border-radius: 20px;
  color: #fff;
  padding: 2px 0 0 0;
  border: 0;
}

/deep/.van-overlay {
  background-color: rgba(76, 76, 76, 0.25);
}

// 商品详情页
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 26px;
  bottom: 80px;
}

.block {
  width: 320px;
  height: 520px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
}

.btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  background-image: url("../assets/nav/close.svg");
  background-size: cover;
  position: relative;
  top: 6px;
  right: 6px;
  margin-left: auto;
}
</style>